<script setup lang="ts">
import { OIcon } from '@opensig/opendesign';
import IconDelete from '~icons/app/icon-header-delete.svg';
import IconDeleteAll from '~icons/app/icon-delete.svg';
import { getHotSearchApi } from '@/api/api-search';
import useSearchHistory from '@/composables/useSearchHistory';
import { onMounted, ref } from 'vue';
import { $t } from '@/i18n';

const emits = defineEmits(['click-outside']);

// -------------------- 搜索历史 --------------------
const searchHistory = useSearchHistory();
const handleSearch = (searchValue: string) => {
  searchHistory.add(searchValue);
  emits('click-outside');
  location.href = '/search/result?keyword=' + searchValue;
};
// -------------------- 热门搜索 --------------------
const hotSearchList = ref<string[]>([]); // 热门搜索列表
const getHotSearch = async () => {
  hotSearchList.value = await getHotSearchApi();
};

onMounted(() => {
  getHotSearch();
});
</script>

<template>
  <div v-if="searchHistory.list.value.length" class="history-container">
    <div class="history-title">
      <span class="title">{{ $t('header.recentSearch') }}</span>
      <OIcon class="icon" @click.stop="searchHistory.remove()">
        <IconDeleteAll></IconDeleteAll>
      </OIcon>
    </div>
    <div class="history">
      <div v-for="item in searchHistory.list.value" class="history-item" @click="handleSearch(item)" :key="item">
        <span class="history-text">{{ item }}</span>
        <OIcon class="icon-container" @click.stop="searchHistory.remove(item)">
          <IconDelete class="icon"></IconDelete>
        </OIcon>
      </div>
    </div>
    <div class="split-line"></div>
  </div>
  <div class="hots">
    <div class="hots-title">
      <p>{{ $t('header.hotSearch') }}</p>
    </div>
    <div v-for="item in hotSearchList" :key="item" type="text" class="hots-list-item" @click="handleSearch(item)">
      {{ item }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.history-container {
  .title {
    @include tip2;
    color: var(--o-color-info3);
  }

  .history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      cursor: pointer;
      color: var(--o-color-info1);
      &:hover {
        color: var(--o-color-ubmc-hover);
      }
    }
    :deep(.o-icon) {
      path {
        fill: currentColor;
      }
    }
  }

  .history {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .history-item {
      cursor: pointer;
      background-color: var(--o-color-fill3);
      border-radius: var(--o-radius-xs);
      margin-top: var(--o-gap-2);
      height: 24px;
      max-width: 224px;
      display: flex;
      align-items: center;
      padding: 0 var(--o-gap-3);
      position: relative;

      .icon-container {
        display: none;
      }

      @include hover {
        background-color: rgba(235, 241, 250, 1);
        color: var(--o-color-ubmc);

        .icon-container {
          display: inline-block;
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: rgb(var(--o-mixedgray-9));
          right: -8px;
          top: -10px;
          color: white;
        }
      }

      .icon {
        height: 16px;
        width: 16px;
      }

      &.dark {
        @include hover {
          background-color: rgb(var(--o-mixedgray-7));
        }
      }

      .history-text {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @include tip2;
      }
    }
  }

  .split-line {
    background: var(--o-color-control4);
    width: 100%;
    height: 1px;
    margin: var(--o-gap-4) 0;
  }
}
.hots {
  .hots-title {
    @include tip2;
    color: var(--o-color-info3);
    padding-bottom: var(--o-gap-2);
  }

  .hots-list-item {
    font-size: 14px;
    line-height: 32px;
    padding-left: var(--o-gap-2);
    cursor: pointer;

    .search-key {
      color: var(--o-color-ubmc);
    }

    @include hover {
      background-color: var(--o-color-control2-light);
      border-radius: var(--o-radius-s);
    }
  }
}
</style>
